import { useNavigate } from "@solidjs/router";
import { BsKeyboardFill } from "solid-icons/bs";
import { createSignal } from "solid-js";

export default function JoinChatting() {
  const [chatCode, setchatCode] = createSignal("");
  const navigate = useNavigate();
  function handleJoin(e: Event) {
    e.preventDefault();

    navigate(`/T${chatCode()}`);
  }
  return (
    <form class="flex items-center space-x-2" onSubmit={[handleJoin]}>
      <div class="group relative">
        <BsKeyboardFill class="absolute left-3 top-1/2 -mt-2.5 text-slate-400 pointer-events-none group-focus-within:text-blue-500 text-xl" />

        <input
          class="focus:ring-2 focus:ring-blue-500 focus:outline-none appearance-none w-full text-sm leading-6 text-slate-900 placeholder-slate-400 placeholder:text-md rounded-md py-3 pl-10 ring-1 ring-slate-200 shadow-sm"
          value={chatCode()}
          onInput={(e) => setchatCode(e.currentTarget.value)}
          type="text"
          aria-label="Enter chat code"
          placeholder="Enter chat code"
        />
      </div>
      <button
        class="text-blue-500 hover:bg-gray-700 px-3 py-3 rounded font-bold disabled:text-gray-400 disabled:hover:bg-gray-600 disabled:cursor-not-allowed"
        type="submit"
        disabled={!chatCode().trim().length}
      >
        Join
      </button>
    </form>
  );
}
